<template>
  <div ref='box'>ref-123</div>
  <div> `setup()` 2种写法，都在 console 显示</div>
</template>

<script>
import { ref, onMounted, getCurrentInstance } from 'vue'
export default {
  setup(props, { expose }) {
    const box = ref(null)

    onMounted(() => {
      // https://v3.cn.vuejs.org/api/composition-api.html#getcurrentinstance
      const that = getCurrentInstance() // 这个一般都是定义在外面，可以看下 - 上面的链接
      console.log('`setup()` that=', that)
      const refsBox = that.ctx.$refs.box
      console.log('`setup()` that -> refs=', refsBox, ' is equal ==  `setup const ->  box.vaue`')
      console.log('`setup()` ---------------')
      console.log('`setup()` setup const -> ref=',  box)
      console.log('`setup()` setup const -> ref.value=', box.value)
    })

    const refPrint = () => {
      console.log('`setup()` --- refPrint ---')
    }

    expose({
      refPrint
    })

    return {
      box
    }
  }
}
</script>